<template>
  <div class="share" v-if="userInfo">
    <div class="download" @click="common.download">
      <div class="download-cnt">
          <div class="pic">
            <img src="@/assets/images/logo.png" alt="">
            <p>RunStep-跑步运动教练</p>
            <span>越坚持越幸运</span>
          </div>
          <div class="download-img">
            <img src="@/assets/images/download.png" alt="">
          </div>
        </div>
    </div>
    <div class="userinfo">
      <div class="bg"> 
        <img src="@/assets/images/share_bg.png" alt="">
      </div>
      <div class="user">
        <div class="pic">
          <img :src="userInfo.imageUrl" alt="" v-if="userInfo.imageUrl">
          <span v-else>
            <img src="@/assets/images/male.png" alt="" v-if="userInfo.sex===0">
            <img src="@/assets/images/female.png" alt="" v-if="userInfo.sex===1">
          </span>
          <div class="watch" @click="common.download">
            <button v-if="userInfo.isAttention===0">关注</button>
            <button v-else>已关注</button>
          </div>
        </div>
        <div class="data">
          <b class="name">{{userInfo.nickName}}</b>
          <p class="address"><span>{{userInfo.province || '中国'}}</span><span v-if="userInfo.city">，{{userInfo.city}}</span> </p>
          <p class="fans">
            <span>关注：<b>{{userInfo.ta || 0}}</b></span>
            <span>粉丝：<b>{{userInfo.tf || 0}}</b></span>
          </p>
        </div>
      </div>
    </div>
    <div class="record">
      <p class="title">在这里累计跑步<b>{{userInfo.tm || 0}}</b>公里</p>
      <p class="subtitle">跑步日记</p>
      <div class="flow" v-if="userInfo.tm > 0">
        <div class="record-item">
          <div class="progress-box">
            <div class="circle"></div>
            <div class="progress"></div>
          </div>
          <div class="cnt">
            <p class="time">{{userInfo.record1.time*1000 | formatDate}}</p>
            <p class="info">跑了{{userInfo.record1.tm}}公里，配速{{userInfo.record1.pace | formatSecond}}</p>
          </div>
        </div>
        <div class="record-item">
          <div class="progress-box">
            <div class="circle"></div>
            <div class="progress"></div>
          </div>
          <div class="cnt">
            <p class="time">{{userInfo.record2.time*1000 | formatDate}}</p>
            <p class="info">跑了{{userInfo.record2.tm}}公里，配速{{userInfo.record2.pace | formatSecond}}</p>
          </div>
        </div>
        <div class="record-item">
          <div class="progress-box">
            <div class="circle"></div>
            <div class="progress"></div>
          </div>
          <div class="cnt">
            <p class="time">更早</p>
            <p class="info">跑了{{userInfo.tm1}}公里</p>
          </div>
        </div>
        <div class="record-item">
          <div class="progress-box">
            <div class="circle"></div>
          </div>
          <div class="cnt">
            <p class="info">越坚持越幸运</p>
          </div>
        </div>
      </div>
      <div class="norecord" v-else>
        <img src="@/assets/images/nodata.png" alt="">
        <p>{{userInfo.nickName}}还没有跑步记录！</p>
      </div>
      <div class="join">
        <button type="button"  @click="common.download">立即加入跑步</button>
      </div>
    </div>
    <div class="open" @click="common.download" v-if="showBar">
      <div class="open-cnt">
          <div class="pic">
            <img :src="userInfo.imageUrl" alt="" v-if="userInfo.imageUrl">
            <span v-else>
              <img src="@/assets/images/male.png" alt="" v-if="userInfo.sex===0">
              <img src="@/assets/images/female.png" alt="" v-if="userInfo.sex===1">
            </span>
            <div class="user">
              <p>{{userInfo.nickName}}</p>
              <span>分享给你</span>
            </div>
            
          </div>
          <div class="open-btn">
            <button type="button">runstep内打开</button>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/share'
export default {
  data () {
    return {
      showBar: true,
      userId: '',
      userInfo: ''
    }
  },
  created () {
    this.userId = this.$route.query.userId
    this.showBar = !this.$route.query.showBar
    this.getUserInfo()
  },
  filters: {
    formatSecond (val, type) {
      if (!val) return '--'
      let h = parseInt(val / 3600, 10)
      let m = parseInt((val - 3600 * h) / 60, 10)
      let s = val - m * 60 - h * 3600
      m = m >= 10 ? m : '0' + m
      s = s >= 10 ? s : '0' + s
      return `${m}'${s}"`
    }
  },
  methods: {
    getUserInfo () {
      api.getUserInfo({userId: this.userId}).then((res) => {
        if (res.data.code === 200) {
          this.userInfo = res.data.data
        }
      }).catch()
    }
  }
}
</script>

<style lang="scss" scoped>
.share{
  background-color: #f7f7f7;
  width: 100%;
  overflow: hidden;
  .download{
    padding: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    .download-cnt{
      display: flex;
      .pic{
        flex: 1;
        img{
          width: 4.5rem;
          float: left;
          margin-right: 1rem;
          border-radius: 3px;
        }
        p{
          padding-top: 0.6rem;
          font-size: 1.4rem;
        }
        span{
          display: inline-block;
          padding-top: 1rem;
          font-size: 1rem;
          color: #999;
        }
      }
      .download-img{
        width: 10rem;
        text-align: right;
        padding-top: 0.5rem;
        img{
          width: 4rem;
        }
      }
    }
  }
  .userinfo{
    margin-top: 5rem;
    background-color: #fff;
    .bg{
      height: 10.5rem;
      margin: 0;
      img{
        width: 100%;
      }
    }
    .pic{
      position: relative;
      margin-top: -2rem;
      padding-left: 1rem;
      img{
        width: 8rem;
        border-radius: 50%;
        border:2px solid #fff;
      }
      .watch{
        float: right;
        margin: 3rem 1rem 0 1rem;
        button{
          width: 8rem;
          height: 3rem;
          background: linear-gradient(#FEEA02, #FDD601);
          color: #000;
          border-radius: 2rem;
          border: none;
          outline: none;
        }
      }
    }
    .data{
      padding-left: 2rem;
      padding-bottom: 1rem;
      .name{
        display: block;
        font-size: 2rem;
        padding: 1rem 0;
      }
      .address{
        color: #999;
        font-size: 1.2rem;
        padding-bottom: 1rem;
      }
      .fans{
        font-size: 1.2rem;
        span{
          display: inline-block;
          margin-right: 5rem;
          color: #999;
          b{
            font-size: 1.4rem;
            color: #000;
          }
        }
      }
    }
  }
  .record{
    padding: 1.5rem 1.5rem 6rem 1.5rem;
    border-top:1rem solid #f7f7f7;
    font-size: 1.4rem;
    background-color: #fff;
    .title{
      b{
        font-size: 1.8rem;
        font-weight: bolder;
        font-style: italic;
        margin:0 5px;
      }
    }
    .subtitle{
      color: #999;
      font-size: 1.4rem;
      padding: 1rem 0 2rem 0;
    }
    .flow{
      padding: 1rem 0.5rem;
      .record-item{
        display: flex;
        align-items: left;
        .progress-box{
          width: 2rem;
          .circle{
            width: 0.9rem;
            height: 0.9rem;
            background-color: #FDD601;
            border-radius: 50%;
            opacity: 0.8;
          }
          .progress{
            height: 6rem;
            width: 1px;
            background-color: #FDD601;
            margin-left: 4px;
            opacity: 0.8;
          }
        }
        .cnt{
          margin-top: -0.8rem;
        }
        .time{
          color: #999;
          line-height: 2;
          font-size: 1.2rem;
        }
        .info{
          background-color: #F7F7F7;
          padding: 0.5rem 1rem;
          border-radius: 3px;
        }
      }
    }
    .join{
      text-align: center;
      padding: 2rem 0;
      button{
        width: 220px;
        height: 4rem;
        background: linear-gradient(#FEEA02, #FDD601);
        border-radius: 4rem;
        border: none;
        box-shadow: 0 1px 20px 0px #FDD601;
        outline: none;
      }
    }
  }
  .norecord{
    height: 200px;
    text-align: center;
    color: #999;
    font-size: 1.2rem;
    line-height: 2;
    img{
      margin-top: 5rem;
    }
  }
  .open{
    padding: 0 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top:5px solid #f7f7f7;
    z-index: 999;
    .open-cnt{
      display: flex;
      padding-bottom: 0.2rem;
      .pic{
        flex: 1;
        display: flex;
        img{
          width: 5rem;
          height: 5rem;
          margin-right: 1rem;
          border-radius: 50%;
          border:2px solid #fff;
          margin-top: -0.5rem;
        }
        .user{
          flex: 1;
          p{
            padding-top: 0.6rem;
            font-size: 1.4rem;
          }
          span{
            display: inline-block;
            padding-top: 1rem;
            font-size: 1rem;
            color: #999;
          }
        }
        
      }
      .open-btn{
        width: 12rem;
        text-align: right;
        padding-top: 0.5rem;
        button{
          width: 12rem;
          height: 3rem;
          color: #000;
          border:none;
          border-radius: 3rem;
          background: linear-gradient(#FEEA02, #FDD601);
          margin-top: 0.3rem;
          outline: none;
        }
      }
    }
  }
}
</style>



